:root {
	--primary-font-color: #444444;
	--secondary-font-color: #7f7f7f;
	--info-font-color: #aaaaaa;
}

section.canned-responses {
	overflow-x: hidden;

	padding: 0;
}

.canned-response-shortcut {
	color: var(--primary-font-color);

	font-weight: bold;
}

.canned-response-text {
	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

	color: var(--secondary-font-color);
}

.canned-response-shortcut-preview {
	color: var(--primary-font-color);

	font-weight: 500;
}

.canned-response-text-preview {
	margin-top: 10px;

	white-space: pre-wrap;

	color: var(--secondary-font-color);

	line-height: 1.5;
}

.canned-response-scope {
	color: var(--info-font-color);
}

.canned-response-list li {
	border-top: 1px solid var(--color-gray-light);
}

.canned-response-list li:first-of-type {
	border-top: 0;
}

.canned-response-form-wrapper {
	display: flex;

	padding: 24px;
}

.canned-response-wrapper {
	padding: 24px;
}

.canned-response-wrapper div {
	line-height: 2;
}

.canned-response-buttons {
	padding: 24px;

	border-top: 1px solid var(--color-gray-light);
}

.canned-response-form {
	padding: 24px;
}

.canned-response-label {
	color: var(--primary-font-color);

	font-weight: bold;
}

.canned-response-info {
	color: var(--info-font-color);
}

.canned-response-creator-data {
	flex: 10 4;
}

.canned-response-delete-button {
	flex: 3 2;
}

.canned-response-delete-button a {
	color: var(--primary-font-color);
}

.canned-response-delete-button a:hover,
.canned-response-delete-button a:active {
	color: var(--rc-color-link-active);
}

.canned-response-form-wrapper fieldset {
	flex: 1 1;
}

.canned-response-form-wrapper .rc-input {
	margin-top: 20px;
}

.canned-response-buttons a {
	width: 100%;
}

.popup-canned-response {
	display: flex;
	flex-flow: row wrap;

	&-format {
		overflow-x: hidden;

		flex: 2 0;

		white-space: nowrap;

		text-overflow: ellipsis;
		flex-grow: 1;
	}

	&-description {
		overflow-x: hidden;

		flex: 4 0;

		text-align: right;

		white-space: nowrap;

		text-overflow: ellipsis;

		font-style: italic;
		flex-grow: 2;
	}
}

.rc-old .page-static .content > .canned-response-list-wrapper {
	margin-bottom: 0;
}
